<template>

	<div>
		<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
			<el-tab-pane :label="tab.all" name="first">

				<search-container @on-search="search"></search-container>

				<el-tree ref="carTree" :data="treeData" show-checkbox node-key="id" :props="defaultProps"
					style="height: 61vh; overflow: auto;border: 1px solid lightgray;"
					@node-contextmenu="handleNodeClick" @check="checkTreeBox">
					<span slot-scope="{ node, data }" style="font-size: 12px;">
						<span v-if="data.type!=='car'">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('离线')"
							style="color:#000">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('从未上线')"
							style="color:#9A9A9A">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('停车')"
							style="color:#F69B51">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('熄火')"
							style="color:#F30635">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('行驶')"
							style="color:#3D9B73">{{ node.label }}</span>
					</span>

				</el-tree>

				<div :style="{'z-index': 9999, position: 'fixed',left: optionCardX + 'px', 
								top: optionCardY + 'px', width: '100px', background: 'white',
								 'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)','padding':'5px'}"
					v-show="optionCardShow" id="option-button-group">
					<el-button @click="sssp" class="option-card-button" size="mini" style="margin: 0;">实时视频</el-button>
					<el-button @click="clinfo" class="option-card-button" size="mini"
						style="margin: 0;">车辆信息</el-button>
				</div>



				<div style="padding: 5px;display: flex;justify-content: space-around;">
					<div :style="{'background':run.selected}" @click="changeRun('run')">
						<img src="~@/assets/images/cljk/cl-run.png" alt="logo" width="30px" height="30px" />
					</div>
					<div :style="{'background':stop.selected}" @click="changeRun('stop')">
						<img src="~@/assets/images/cljk/cl-stop.png" alt="logo" width="30px" height="30px" />
					</div>

					<div :style="{'background':xh.selected}" @click="changeRun('xh')">
						<img src="~@/assets/images/cljk/cl-xh.png" alt="logo" width="30px" height="30px" />
					</div>
				</div>

			</el-tab-pane>
			<el-tab-pane :label="tab.online" name="second">
				<search-container @on-search="search"></search-container>

				<el-tree ref="carTree" :data="treeData" show-checkbox node-key="id" :props="defaultProps"
					style="height: 61vh; overflow: auto;border: 1px solid lightgray;"
					@node-contextmenu="handleNodeClick" @check="checkTreeBox">
					<span slot-scope="{ node, data }" style="font-size: 12px;">
						<span v-if="data.type!=='car'">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('离线')"
							style="color:#000">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('从未上线')"
							style="color:#9A9A9A">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('停车')"
							style="color:#F69B51">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('熄火')"
							style="color:#F30635">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('行驶')"
							style="color:#3D9B73">{{ node.label }}</span>
					</span>

				</el-tree>

				<div :style="{'z-index': 9999, position: 'fixed',left: optionCardX + 'px', 
								top: optionCardY + 'px', width: '100px', background: 'white',
								 'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)','padding':'5px'}"
					v-show="optionCardShow" id="option-button-group">
					<el-button @click="sssp" class="option-card-button" size="mini" style="margin: 0;">实时视频</el-button>
					<el-button @click="clinfo" class="option-card-button" size="mini"
						style="margin: 0;">车辆信息</el-button>
				</div>



				<div style="padding: 5px;display: flex;justify-content: space-around;">
					<div :style="{'background':run.selected}" @click="changeRun('run')">
						<img src="~@/assets/images/cljk/cl-run.png" alt="logo" width="30px" height="30px" />
					</div>
					<div :style="{'background':stop.selected}" @click="changeRun('stop')">
						<img src="~@/assets/images/cljk/cl-stop.png" alt="logo" width="30px" height="30px" />
					</div>

					<div :style="{'background':xh.selected}" @click="changeRun('xh')">
						<img src="~@/assets/images/cljk/cl-xh.png" alt="logo" width="30px" height="30px" />
					</div>
				</div>
			</el-tab-pane>
			<el-tab-pane :label="tab.offline" name="third">
				<search-container @on-search="search"></search-container>

				<el-tree ref="carTree" :data="treeData" show-checkbox node-key="id" :props="defaultProps"
					style="height: 61vh; overflow: auto;border: 1px solid lightgray;"
					@node-contextmenu="handleNodeClick" @check="checkTreeBox">
					<span slot-scope="{ node, data }" style="font-size: 12px;">
						<span v-if="data.type!=='car'">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('离线')"
							style="color:#000">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('从未上线')"
							style="color:#9A9A9A">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('停车')"
							style="color:#F69B51">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('熄火')"
							style="color:#F30635">{{ node.label }}</span>
						<span v-if="data.type==='car'&&data.label.includes('行驶')"
							style="color:#3D9B73">{{ node.label }}</span>
					</span>

				</el-tree>

				<div :style="{'z-index': 9999, position: 'fixed',left: optionCardX + 'px', 
								top: optionCardY + 'px', width: '100px', background: 'white',
								 'box-shadow': '0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04)','padding':'5px'}"
					v-show="optionCardShow" id="option-button-group">
					<el-button @click="sssp" class="option-card-button" size="mini" style="margin: 0;">实时视频</el-button>
					<el-button @click="clinfo" class="option-card-button" size="mini"
						style="margin: 0;">车辆信息</el-button>
				</div>



				<div style="padding: 5px;display: flex;justify-content: space-around;">
					<div :style="{'background':run.selected}" @click="changeRun('run')">
						<img src="~@/assets/images/cljk/cl-run.png" alt="logo" width="30px" height="30px" />
					</div>
					<div :style="{'background':stop.selected}" @click="changeRun('stop')">
						<img src="~@/assets/images/cljk/cl-stop.png" alt="logo" width="30px" height="30px" />
					</div>

					<div :style="{'background':xh.selected}" @click="changeRun('xh')">
						<img src="~@/assets/images/cljk/cl-xh.png" alt="logo" width="30px" height="30px" />
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>


</template>

<script>
	import { ZXWS_WEB_SERVER_IP, ZXWS_WEB_SERVER_PORT, ZXWS_VIDEO_SERVER_PORT } from '@/config/env';
	
	import {
		getCarOrgList
	} from '@/api/cljk.js';
	import {
		login_key
	} from '@/config/storage-keys';
	import searchContainer from './search-container.vue'
	export default {
		name: 'leftContent',
		components: {
			'search-container': searchContainer
		},
		data() {
			return {
				zxws_web_server_ip:ZXWS_WEB_SERVER_IP,
				zxws_web_server_port:ZXWS_WEB_SERVER_PORT,
				zxws_video_server_port:ZXWS_VIDEO_SERVER_PORT,
				optionCardShow: false,
				nodeData: null,
				optionCardX: 0,
				optionCardY: 0,
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				activeName: 'first',
				user: null,
				tab: {
					all: '全部(1000辆)',
					online: '在线(1000辆)',
					offline: '离线(1000辆)',
				},
				searchParam: {
					userId: null,
					searchType: 0,
					onlineType: 0,
					videoType: 0,
					connectType: 0,
					runType: 0,
					syxz: null,
					searchKey: null,
				},
				init: true,
				treeData: [],
				run: {
					selected: null,
					num: 0
				},
				stop: {
					selected: null,
					num: 0
				},
				xh: {
					selected: null,
					num: 0
				},
				websocket: null
			}
		},
		methods: {

			setupWebSocket() {
				this.websocket = new WebSocket("ws://"+this.zxws_web_server_ip+":"+this.zxws_web_server_port+"/ws/gps/web"); // 创建WebSocket连接
				this.websocket.onopen = this.onWebSocketOpen; // WebSocket连接打开时的处理函数
				this.websocket.onmessage = this.onWebSocketMessage; // 收到WebSocket消息时的处理函数
				this.websocket.onclose = this.closeWebSocket; // WebSocket连接关闭时的处理函数
			},
			onWebSocketOpen() {
				console.log("链接成功");
			},
			closeWebSocket() {
				if (this.websocket) {
					this.websocket.close(); // 关闭WebSocket连接
				}
			},
			onWebSocketMessage(event) {
				const message = event.data;
				// 处理从服务器接收的消息
				var obj=JSON.parse(message)
				var node=this.$refs.carTree.getNode(obj.treeNode.id)
				node.data.label=obj.treeNode.label
				this.$emit('map-data',obj.mapData)
				// 在这里您可以根据消息的内容执行不同的操作，例如更新界面、触发事件等
			},


			checkTreeBox(arr, selected) {

				this.$emit('on-selected', {
					type: 'loadTable',
					data: selected.checkedNodes.filter(e => e.type === 'car')
				})
			},

			sssp() {
				this.$emit('on-selected', {
					type: 'sssp',
					data: this.nodeData.data
				})
				this.optionCardShow = false
			},

			clinfo() {
				this.$emit('on-selected', {
					type: 'clinfo',
					data: this.nodeData.data
				})
				this.optionCardShow = false
			},

			handleNodeClick(e, data, n, t) {

				if (data.type === 'car') {
					this.optionCardShow = false
					this.optionCardX = e.x // 让右键菜单出现在鼠标右键的位置
					this.optionCardY = e.y - 110

					this.nodeData = n // 将当前节点保存

					this.optionCardShow = true // 展示右键菜单
				}

			},
			handleClick(tab, event) {
				if (this.activeName === 'first') {
					this.searchParam.onlineType = 0
				} else if (this.activeName === 'second') {
					this.searchParam.onlineType = 1
				} else if (this.activeName === 'third') {
					this.searchParam.onlineType = 2
				}
				this.init = false
				this.searchList()
			},
			search(p) {
				this.init = false
				var {
					videoType,
					connectType,
					searchType,
					searchKey,
					syxz
				} = p

				this.searchParam.videoType = videoType
				this.searchParam.connectType = connectType
				this.searchParam.searchType = searchType
				this.searchParam.searchKey = searchKey
				this.searchParam.syxz = syxz
				this.searchList()
			},
			searchList() {
				this.searchParam.userId = this.user.id
				getCarOrgList(this.searchParam).then(res => {
					if (res.code === 200) {
						if (this.init) {
							this.tab.all = '全部(' + res.data.total + '辆)'
							this.tab.online = '在线(' + res.data.online + '辆)'
							this.tab.offline = '离线(' + res.data.offline + '辆)'
						}

						this.treeData = res.data.data

					}
				}).catch(err => {
					console.log(err)
				})
			},
			changeRun(type) {
				if (type === 'run') {
					this.stop = {
						selected: null,
						num: 0
					}
					this.xh = {
						selected: null,
						num: 0
					}
					this.run.num++;
					if (this.run.num % 2 !== 0) {
						this.run.selected = '#409EFF'
						this.searchParam.runType = 2
						this.searchList()
					} else {
						this.run.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}

				}

				if (type === 'stop') {
					this.run = {
						selected: null,
						num: 0
					}
					this.xh = {
						selected: null,
						num: 0
					}
					this.stop.num++;
					if (this.stop.num % 2 !== 0) {
						this.stop.selected = '#409EFF'
						this.searchParam.runType = 3
						this.searchList()
					} else {
						this.stop.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}

				}

				if (type === 'xh') {
					this.run = {
						selected: null,
						num: 0
					}
					this.stop = {
						selected: null,
						num: 0
					}
					this.xh.num++;
					if (this.xh.num % 2 !== 0) {
						this.xh.selected = '#409EFF'
						this.searchParam.runType = 4
						this.searchList()
					} else {
						this.xh.selected = null
						this.searchParam.runType = 0
						this.searchList()
					}

				}


			},

		},
		mounted() {
			this.user = this.$Storage.getLocalStorage(login_key)
			this.searchList()
		},
		created() {
			this.setupWebSocket();
		},
		beforeDestroy() {
			this.closeWebSocket(); // 在组件销毁前关闭WebSocket连接
		}


	}
</script>

<style lang="scss">
	// 文件夹卡片
	.folder-box {
		height: 100%;
	}

	// 右键菜单按钮
	.option-card-button {
		width: 100%;
		margin-left: 0;
		font-size: 10px;
		border-radius: 0;
	}
</style>